import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'


const routes: Array<RouteRecordRaw> = [

    {
        path: '/setup1',
        name: 'setup1',
        component: () => import('@/demo/1_setup.vue'),
    },
    {
        path: '/ref',
        name: 'ref',
        component: () => import('@/demo/2_ref.vue'),
    },
    {
        path: '/reactive',
        name: 'reactive',
        component: () => import('@/demo/3_reactive.vue'),
    },
    {
        path: '/reactive2',
        name: 'reactive2',
        component: () => import('@/demo/3_reactive2.vue'),
    },
    {
        path: '/responsive',
        name: 'responsive',
        component: () => import('@/demo/4_responsive.vue'),
    },
    {
        path: '/setup_detail',
        name: 'setup_detail',
        component: () => import('@/demo/5_setup_detail.vue'),
    },
    {
        path: '/computed',
        name: 'computed',
        component: () => import('@/demo/6_computed.vue'),
    },
    {
        path: '/watch_ref',
        name: 'watch_ref',
        component: () => import('@/demo/7_watch_ref.vue'),
    },
    {
        path: '/watch_reactive',
        name: 'watch_reactive',
        component: () => import('@/demo/7_watch_reactive.vue'),
    },
    {
        path: '/watch_ref_value',
        name: 'watch_ref_value',
        component: () => import('@/demo/7_watch_ref_value.vue'),
    },
    {
        path: '/watchEffect',
        name: 'watchEffect',
        component: () => import('@/demo/8_watchEffect.vue'),
    },
    {
        path: '/vue3Life',
        name: 'vue3Life',
        component: () => import('@/demo/9_vue3Life.vue'),
    },
    {
        path: '/customHook',
        name: 'customHook',
        component: () => import('@/demo/10_customHook.vue'),
    },
    {
        path: '/toRef_toRefs',
        name: 'toRef_toRefs',
        component: () => import('@/demo/11_toRef_toRefs.vue'),
    },
    {
        path: '/router_routeA',
        name: 'router_routeA',
        component: () => import('@/demo/12_router_routeA.vue'),
    },
    {
        path: '/router_routeB',
        name: 'router_routeB',
        component: () => import('@/demo/12_router_routeB.vue'),
    }


]

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes,
})

export default router